<script setup>

import {ref} from "vue";

const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}

const avatarCSS = ref("avatar");

const avatarClose = () => {
    avatarCSS.value='avatar';
}
</script>

<template>
  <div class="nav-container">
    <div style="width: 3rem;height: 2rem">
      <icon></icon>
    </div>
    <el-menu
        :default-active="1"
        class="el-menu-demo"
        mode="horizontal"
        background-color="none"
        active-text-color="#ffd04b"
        router
        @select="handleSelect"
        style="--el-menu-hover-bg-color:#fff;"
    >
      <el-menu-item index="home" style="border: none;font-weight: 550;font-size: 18px">首页</el-menu-item>
      <el-menu-item index="" style="border: none;font-weight: 550;font-size: 18px">使用</el-menu-item>
      <el-menu-item index="3" style="border: none;font-weight: 550;font-size: 18px">预约</el-menu-item>
      <el-menu-item index="1" style="border: none;font-weight: 550;font-size: 18px">
        <router-link to="/organization">组织</router-link>
      </el-menu-item>
      <el-menu-item index="about" style="border: none;font-weight: 550;font-size: 18px">关于我们</el-menu-item>
    </el-menu>
    <div class="avatar-container">
      <el-popover popper-style="z-index: 30;" :width="300" placement="bottom" @after-enter="avatarCSS='avatar avatar-hover'" @hide="avatarClose" :hide-after="0">
        <template #reference>
          <el-avatar style="width: 2rem;height: 2rem;" :class="avatarCSS">
            <el-icon size="20">
              <UserFilled/>
            </el-icon>
          </el-avatar>
        </template>
        <div class="popover-content">
          <el-button class="popover-button" href="/personalCenter" tag="a">
            <el-icon><User/></el-icon>
            <div class="popover-button-text">个人中心</div>
            <el-icon><ArrowRight /></el-icon>
          </el-button>

          <el-button class="popover-button">
            <el-icon><User/></el-icon>
            <div class="popover-button-text">我的组织</div>
            <el-icon><ArrowRight /></el-icon>
          </el-button>

          <el-button class="popover-button">
            <el-icon><User/></el-icon>
            <div class="popover-button-text">退出登录</div>
            <el-icon><ArrowRight /></el-icon>
          </el-button>
        </div>
      </el-popover>
    </div>
    <el-button class="console-button">
      <el-icon size="30">
        <SetUp />
      </el-icon>
      <router-link to="/console">
        <span>控制台</span>
      </router-link>
    </el-button>
  </div>
</template>

<style scoped>
.nav-container{
  height: 100%;
  display: flex;
}

.el-menu-demo{
  width: 100%;
  border: none;
}

.avatar-container{
  padding: 1rem;
}

.console-button{
  color: black;
  margin: auto 60px auto 0;
  background: none;
  border: none;
  font-size: 18px;
}

.popover-content{
  display: flex;
  position: relative;
  width: 300px;
  height: 200px;
  flex-direction: column;
  top: 100px;
  z-index: 30;
}


.popover-button{
  font-size: 16px;
  border: none;
  width: 90%;
  margin: 2px 0;
}

.popover-button-text{
  margin: 0 80px 0 20px;
}

.avatar{
  position: relative;
  transition: transform 0.2s linear, top 0.3s ease;
  transform-origin: top;
  z-index: 40;
}

.avatar:hover {
  position: relative;
  transform: scale(2.5);
  z-index: 40;
}

.avatar-hover{
  position: relative;
  transform: scale(2.5);
  z-index: 40;
}
</style>